<template>
	<div class="cmt-comments">
		<h4>发表评论</h4>
		<textarea placeholder="请发表评价(字数120以内)" maxlength="120" v-model="msg"></textarea>
		<mt-button type="primary" size="large" @click="postComments">发表评论</mt-button>
		<div class="cmt-list" >
			<div class="cmt-item" v-for="(item,i) in commentsList" :link="item.id">
				<div class="cmt-title">
					第{{i+1}}楼:&nbsp;&nbsp;用户:{{item.user_name}}&nbsp;&nbsp;发表时间:{{item.add_time|dateFormat}}
				</div>
				<div class="cmt-body">
					{{ item.content === "" ? "此用户很懒，嘛都没说":item.content }}
				</div>

			</div>
			
		</div>
		<mt-button type="primary" size="large" @click="addCommentsAgain">加载更多</mt-button>

	</div>
</template>
<script>
	import { Toast } from 'mint-ui';
	export default{
		data(){
			return{
				pageindex:1,
				commentsList:[],
				msg:""
			}
		},
		created(){
			this.addComments()
		},
		methods:{
			addComments(){
				this.$http.get("api/getcomments/"+this.id+"?pageindex="+this.pageindex+"").then(result=>{
					if(result.body.status===0){
						// this.commentsList=result.body.message;
						this.commentsList=this.commentsList.concat(result.body.message)
					}else{
						Toast('获取评论失败');
					}
				})
			},
			addCommentsAgain(){
				this.pageindex++;
				this.addComments();
			},
			postComments(){
			if(this.msg.trim().length===0){
				return Toast('评论不能为空');
			}
			this.$http.post("api/postcomment/"+this.$route.params.id,{content:this.msg.trim()}).then(result=>{
				if(result.body.status===0){
					var com={user_name:'匿名用户',add_time:Date.now(),content:this.msg.trim()};
					this.commentsList.unshift(com);
					this.msg="";
				}else{
					Toast('提交评论失败');
				}
			})
		  }
		},
		props:['id'],
	};
</script>
<style lang="less" scoped>
		.cmt-comments{
			h4{
				font-size: 16px;
			}
			textarea{
				font-size: 16px;
				margin-bottom: 0;
			}
			.cmt-list{
				margin-top: 5px;
				.cmt-item{
					margin-bottom: 5px;
					.cmt-title{
						font-size: 14px;
						background: #ccc;
					}
					.cmt-body{
						font-size: 16px;
					}
				}
			}
		}
</style>
